<template>
	<sy-navigation :homejb="'home'" :scrollTopNum="scrollTopNum">
		<template #header>
			<view class="header_title">
				志愿填报
			</view>
		</template>
		<view class="home_view">
			<view class="lunbo_box">
				<swiper :autoplay="true" :circular="true" :interval="4000" :duration="1000" @change="changeLunbo">
					<swiper-item v-for="item in lunboList">
						<view class="swiper-item">
							<image :src="baseUrl+item.image" class="img1"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>  
			<view class="nav_box">
				<view class="nav_item" v-for="item in navBox" @click="naviteTo(item.url)">
					<image :src="item.img" class="cbg_img"></image>
					<view class="info_b">
						<image :src="item.img2" class="img2"></image>
						<view class="c_text">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<image src="../../static/home/zyk.png" class="zy_img" @click="naviteTo('filling')"></image>
			<view class="sy_title">
				热门学校
			</view>
			<scroll-view class="scroll_h_view" scroll-x="true">
				<view  v-for="pItem in schoolList" class="sc_item_view">
					<view class="cc_item" v-for="cItem in pItem" @click="toDetail(cItem)">
						<image :src="baseUrl + cItem.logo" class="sc_img"></image>
						<view class="sc_info">
							<view class="s_tit shengluehao">
								{{cItem.name}}
							</view>
							<view class="s_cas">
								<span  class="c_span">{{cItem.nature_text}}</span>
								<span  class="c_span">{{cItem.area_text}}</span>
								<span  class="c_span">{{cItem.type_text}}</span>
							</view>
						</view>
					</view>
				</view>
				
			</scroll-view>
			<view class="sy_title">
				中考相关
			</view>
			<view class="box_list">
				<view class="box_item" v-for="cItem in zhongkaoList" @click="showContent(cItem.id)">
					<image :src="baseUrl+cItem.image" class="c_img"></image>
					<view class="c_info">
						<view class="c_tit">
							{{cItem.title}}
						</view>
						<view class="c_time">
							发布日期：{{cItem.createtime}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="homePop" type="bottom">
			<sy-login @closePop="$refs.homePop.close()"></sy-login>
		</uni-popup>
	</sy-navigation>
	
</template>

<script>
	export default {
		data() {
			return {
				lunboList:[],
				lunboIndex:0,
				navBox:[
				{img:"../../static/home/q1.png",img2:"../../static/home/qw1.png",title:"志愿填报",url:"filling"},
					{img:"../../static/home/q2.png",img2:"../../static/home/qw2.png",title:"专业评估",url:"filling"},
					{img:"../../static/home/q3.png",img2:"../../static/home/qw3.png",title:"招生计划",url:"EnrollmentPlan"},
					{img:"../../static/home/q4.png",img2:"../../static/home/qw4.png",title:"录取分数",url:"entryScore"},
				],
				schoolList:[],
				zhongkaoList:[],
				scrollTopNum:0,
				share: {
					title: '志愿填报',
					path: '/pages/home/home', // 全局分享的路径
					imageUrl: '', // 全局分享的图片(可本地可网络)
				}
				
			};
		},
		onLoad(ph) {
			console.log(ph,"onLoadph")
			if(ph.shareId){
				uni.setStorage({ //缓存用户登陆状态
					key: 'shareId',
					data: ph.shareId
				})
			}
			if(ph.shareId && uni.getStorageSync('token')){
				let shareInfo = {
					spm:ph.shareId+".1.0.3.1",
					shareId:ph.shareId,
					platform:"WechatMiniProgram",
					page:"/pages/index/index"
				}
				//挂接分享上级
				this.$queryApi("post","/share/add", shareInfo, res => {},"","noMsg")
			}
			
		},
		computed:{
			baseUrl(){
				return this.$store.state.baseUrl
			}
		},
		mounted() {
			if(!uni.getStorageSync('token')){
				this.$refs.homePop.open();
			}else{
				this.$resetUserInfo()
			}
			
			this.getData()
		},
		onPageScroll(e) {
		    // e.scrollTop 表示当前页面滚动的距离
		    // console.log('页面滚动距离：', e.scrollTop);
			this.scrollTopNum = e.scrollTop;
			
		},
		onShow() {
			// uni.setStorageSync('token',"12ed9c1b-1cfb-4028-a2f3-49990a57e0f2");
			// this.$resetUserInfo();
			// this.wechatLogin()
			
		},
		// 1.发送给朋友
		onShareAppMessage(res) {
			let path = ''
			if(uni.getStorageSync('shareId')){
				path = '/pages/home/home?shareId='+uni.getStorageSync('shareId')
			}else{
				path = '/pages/home/home'
			}
			return {
				title: '志愿填报',
				path,
				// imageUrl: this.share.imageUrl,
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			let path = ''
			if(uni.getStorageSync('shareId')){
				path = '/pages/home/home?shareId='+uni.getStorageSync('shareId')
			}else{
				path = '/pages/home/home'
			}
			return {
				title: '志愿填报',
				path,
				// imageUrl: this.share.imageUrl,
			}
		},
		methods:{
			showContent(cItemId){
				uni.navigateTo({
					url:"/pages/detail/webViewDetail?id="+cItemId+"&type=zhongkao"
				})
			},
			calcSchool(scList){
				console.log(scList,"scList",0%2)
				if(scList.length == 0){
					this.schoolList =  []
				}else
				if(scList.length < 6){
					let schoolList = [[],[]];
					scList.map((item,key)=>{
						if(key%2 == 0){
							schoolList[0].push(item)
						}else{
							schoolList[1].push(item)
						}
					})
					this.schoolList = schoolList;
					console.log(this.schoolList,"this.schoolList")
				}else{
					let schoolList = [];
					let navLength = Math.ceil(scList.length/3);
					for(let iv = 0;iv < navLength;iv++){
						schoolList.push([])
					}
					scList.map((item,key)=>{
						console.log(key%navLength ,key,"2222197")
						// if(key%navLength == key){
							
						// }
						schoolList[key%navLength].push(item)
					})
					this.schoolList = schoolList;
					console.log(this.schoolList,"this.schoolList")
				}
			},
			getData(){
				this.$queryApi("post","/index/home", {}, res => {
					console.log(res,"home")
					this.lunboList = res.data.banner;
					let schoolList = res.data.school;
					this.calcSchool(schoolList)
					this.zhongkaoList = res.data.article
					
				},"false","noMsg")
			},
			toDetail(cItem){
				console.log(cItem)
				uni.navigateTo({
					url:"/pages/school/schoolDetail?id="+cItem.id
				})
			},
			changeLunbo(el) {
				setTimeout(() => {
					this.lunboIndex = el.detail.current;
					
				}, 1000)
			},
			naviteTo(url){
				if(url == 'EnrollmentPlan'){
					uni.navigateTo({
						url:"/pages/index/EnrollmentPlan"
					})
				}
				if(url == 'filling'){
					uni.navigateTo({
						url:"/pages/index/filling"
					})
				}
				if(url == 'entryScore'){
					uni.navigateTo({
						url:"/pages/index/entryScore"
					})
				}
				
				
			}
		}
	}
</script>

<style lang="scss">
	.sy_title{
		color: #3D3D3D;
		font-weight: bold;
		display: flex;
		font-size: 32rpx;
		padding:10rpx 0 ;
		&:before{
			content: "";
			display: block;
			width: 8rpx;
			height: 32rpx;
			background-color: #3677F6;
			margin-right: 12rpx;
			position: relative;
			top: 6rpx;
		}
	}
	.home_view{
		padding: 30rpx;
		.box_list{
			padding: 12rpx 0 60rpx;
			.box_item{
				margin-bottom: 40rpx;
				display: flex;
				.c_img{
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					flex-shrink: 0;
				}
				.c_info{
					display: inline-flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 6rpx 0;
					.c_tit{
						font-size: 32rpx;
						color: #3D3D3D;
					}
					.c_time{
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
		}
		.scroll_h_view {
			white-space: nowrap;
			width: 100%;
			padding-top: 12rpx;
			padding-bottom: 20rpx;
			.sc_item_view{
				display: inline-flex;
				flex-direction: column;
				.cc_item{
					width: 420rpx;
					height: 140rpx;
					box-sizing: border-box;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					padding: 20rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(205,205,205,0.4);
					border-radius: 10rpx;
					display: flex;
					.sc_img{
						width: 100rpx;
						height: 100rpx;
						margin-right: 20rpx;
						flex-shrink: 0;
					}
					.sc_info{
						flex:1;
						.s_tit{
							font-size: 32rpx;
							color: #3D3D3D;
							max-width: 280rpx;
						}
						.s_cas{
							.c_span{
								font-size: 24rpx;
								color: #999999;
								&+.c_span::before{
								content: "";
								display: inline-block;
								width: 1rpx;
								height: 18rpx;
								background-color: #999999;
								margin-right: 8rpx;
								margin-left: 8rpx;
								position: relative;
								top: 1rpx;
							}
							}
						}
					}
				}
			}
		}
		.zy_img{
			width: 690rpx;
			height: 240rpx;
			padding-top: 20rpx;
			padding-bottom: 26rpx;
		}
		.lunbo_box{
			height: 320rpx;
			overflow: hidden;
			.swiper-item {
				text-align: center;
			}
			
			.img1 {
				width: 686upx;
				height: 280upx;
				border-radius: 20rpx;
			
			}
		}
		.nav_box{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.nav_item{
				background: no-repeat center center;
				background-size: 100% 100%;
				width: 334rpx;
				height: 160rpx;
				margin-bottom: 20rpx;
				position: relative;
				.cbg_img{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				
				}
				.info_b{
					
				
					padding: 12rpx 0 0 40rpx;
					text-align: center;
					display: inline-block;
					position: relative;
					
					z-index: 1;
					.img2{
						width: 88rpx;
						height: 88rpx;
						vertical-align: bottom;
					}
					.c_text{
						color: #3D3D3D;
						font-size: 26rpx;
					}
				}
			}
		}
	}
	.header_title{
		color: #3D3D3D;
		font-size: 44rpx;
		font-weight: 700;
		left: 30rpx;
		position: absolute;
		top:50%;
		transform: translate(0,-50%);
	}
</style>
